<template>
	<view>
		<view style="padding: 0 30rpx;background-color: white;">
			<u-form :model="form" ref="uForm" label-width="auto" >
				<u-form-item label="发票类型" prop="fplx" required>
					<u-radio-group v-model="form.fplx">
						<u-radio v-for="(item, index) in [{value:1,name:'数电普通发票'},{value:2,name:'数电专用发票'}]" :key="index"
							:name="item.value">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<!-- 发票号 -->
				<u-form-item label="名称" prop="mc" required>
					<u-input placeholder="请输入名称" v-model="form.mc" />
				</u-form-item>
				<!-- 税号 -->
				<u-form-item label="税号" prop="sh">
					<u-input placeholder="请输入税号" v-model="form.sh" />
				</u-form-item>
				<!-- 税号 -->
				<u-form-item label="地址" prop="dz">
					<u-input placeholder="请输入地址" v-model="form.dz" />
				</u-form-item>
				<!-- 电话 -->
				<u-form-item label="电话" prop="dh">
					<u-input placeholder="请输入电话" v-model="form.dh" />
				</u-form-item>
				<!-- 开户银行 -->
				<u-form-item label="开户银行" prop="dh">
					<u-input placeholder="请输入开户银行" v-model="form.khyh" />
				</u-form-item>
				<!-- 银行账号 -->
				<u-form-item label="银行账号" prop="yhzh">
					<u-input placeholder="请输入银行账号" v-model="form.yhzh" />
				</u-form-item>
				<!-- 金额 -->
				<u-form-item label="金额" prop="je" required>
					<u-input placeholder="请输入金额" v-model="form.je" type="digit" />
				</u-form-item>
				<!-- 金额 -->
				<u-form-item label="客户姓名" prop="khxm" required>
					<u-input placeholder="请输入客户姓名" v-model="form.khxm" />
				</u-form-item>
				<!-- 手机号 -->
				<u-form-item label="手机号" prop="sjh" required >
					<u-input placeholder="请输入客户姓名" v-model="form.sjh" type="number" />
				</u-form-item>
				<!-- 邮箱 -->
				<u-form-item label="邮箱" prop="yx">
					<u-input placeholder="请输入邮箱" v-model="form.yx" />
				</u-form-item>
				<!-- 备注 -->
				<u-form-item label="备注" prop="bz">
					<u-input placeholder="请输入备注" v-model="form.bz" />
				</u-form-item>
				<!-- 附件 -->
				<u-form-item label="附件">
					<u-upload ref="uUpload" :auto-upload="false" :show-progress="true"  :file-list="fileList" @on-remove="onRemove"
						:form-data="{path:'/static/img/kpsqfj/'}" :multiple="false">
					</u-upload>
				</u-form-item>
				
			</u-form>
		</view>
		<!-- 关联订单 -->
		<view height="80" bg-color="#F4F5F6">
			<view
				style="padding: 20rpx 30rpx;display: flex;justify-content: space-between;color: #303133;font-size: 28rpx;">
				<text style="">关联订单</text>
				<text style="color: #ff9900;">点击已选择的订单可移除</text>
				<text style="color: #2979ff;" @click="toSelectOrderPage">选择</text>
			</view>
		</view>
		<view style="background-color: white;">
			<u-cell-group>
				<u-cell-item :arrow="false" v-for="(item,idx) in form.orders" @click="()=>{
					form.orders.splice(idx,1)
				}">
					<view slot="title" style="width: 580rpx;display: flex;justify-content: space-between;">
						<text>{{item.orders_num}}</text>
						<text>{{item.car_num}}</text>
					</view>
					<text slot="right-icon" class="currency" style="color: #000;font-weight: bold;">
						{{item.total_amount}}
					</text>
					<view slot="label" >
						<view style="display: flex;">
							<text style="" v-if="item.custom_name">{{item.custom_name}}</text>
							<text style="" v-else></text>
							<text style=" margin-left: 30rpx;" v-if="item.custom_tel">{{item.custom_tel}}</text>
							<text style=" margin-left: 30rpx;" v-else></text>
						</view>
						<view style="display: flex;" class="ellipsis">
							<text>{{strToFormat(item.take_date)}}</text>
							<u-icon name="arrow-rightward" style="margin: 0 10rpx;"></u-icon>
							<text>{{strToFormat(item.return_date)}}</text>
							<text>（{{strDateToTime2(item.take_date,item.return_date)}}）</text>
						</view>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		<u-form-item>
			<u-button type="primary" @click="update">保存</u-button>
		</u-form-item>
		<u-toast ref="uToast"></u-toast>
		<myModal ref="myModal"></myModal>
	</view>
</template>

<script>
	import cos from '../../utils/cos';
	import dateUtils from '../../utils/dateUtils.js'
	export default {
		data() {
			return {
				kpsq_id:null,
				host: 'https://cos2.ksmeilv.com',
				fileList:[],
				form:{
					fplx:null,
					mc:'',
					je:'',
					khxm:'',
					sjh:'',
					orders:[],
					fj:''
				},
				rules: {
					fplx: [{
						required: true,
						type:'number',
						message: '请选择发票类型',
						trigger: ['blur', 'change']
					}],
					mc: [{
						required: true,
						message: '请输入名称',
						trigger: ['blur', 'change']
					}],
					je: [{
						required: true,
						message: '请输入金额',
						trigger: ['blur', 'change']
					}],
					khxm: [{
						required: true,
						message: '请输入客户姓名',
						trigger: ['blur', 'change']
					}],
					sjh: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(option) {
			if(option.kpsq_id){
				 this.kpsq_id=option.kpsq_id;
				 this.getOrderInfo();
			}
		},
		mounted() {
			var that = this;
			uni.$on('returnSelectedOrders', function(orders) {
				that.form.orders.push(orders);
			});
		},
		methods: {
			submit() {
				var that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						that.$http.post('/kpsq/insert', that.form, (res) => {
							if (res.data.success) {
								that.$refs.uToast.show({
									title: '成功',
									type: "success"
								});
								uni.navigateBack();
							} else {
								that.refs.myModal.show('请求失败', res.data.result.message);
							}
						});
					} else {
						console.log('验证失败');
					}
				});
			},
			strToFormat(strDate) {
				return dateUtils.strToFormat(strDate);
			},
			strDateToTime2(take_date, return_date) {
				return dateUtils.strDateToTime2(take_date, return_date);
			},
			toSelectOrderPage() {
				uni.navigateTo({
					url: '/pages/selectOrdersAndReturnInfo/selectOrdersAndReturnInfo'
				})
			},
			update() {
				var that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var list = that.$refs.uUpload.lists;
						var dir = '/static/file/kpsq_fj/';
						console.log("daozhelilaile ");
						cos.uploadFiles(list, dir, (data) => {
							console.log("上传也没问题");
							console.log(data);
							var img_keys = data.files.map(item => item.options.Key);
							console.log(img_keys);
							console.log("大哥日志：");
							var fj=that.form.fj;
							console.log(fj);
							fj=fj.split(',');
							console.log(fj);
							// console.log((that.form.fj.split(',').concat(img_keys)));
							that.form.fj =(that.form.fj.split(',').concat(img_keys)).toString();
							console.log(that.form.fj);
							that.$http.post('/kpsq/update', that.form, (res) => {
								if (res.data.success) {
									that.$refs.uToast.show({
										title: '成功',
										type: "success"
									});
									uni.navigateBack();
								} else {
									that.refs.myModal.show('请求失败', res.data.result.message);
								}
							});
						});
						
					} else {
						console.log('验证失败');
					}
				});
			},
			onRemove(index,list,name){
				this.form.fj=this.form.fj.split(',');
				this.form.fj.splice(index,1);
				this.form.fj=this.form.fj.toString();
				console.log(this.form.fj);
			},
			getOrderInfo() {
				var that = this;
				that.$http.get('/kpsq/queryById?kpsq_id=' + this.kpsq_id, {}, (res) => {
					if (res.data.success) {
						that.form = res.data.result;
						if(that.form.fj){
							that.fileList=that.form.fj.split(',').map(item=> ({url:that.host+item,}));
							var list = that.$refs.uUpload.lists;
						}else{
							that.form.fj='';
						}
					} else {
						that.$refs.myModal.show('请求失败', res.data.result.message);
					}
				});
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>

</style>